<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="example">
        <p>original message:"{{message}}"</p>
        <p>computed reversed message :"{{reversedMessage}}"</p>
        <p>now :"{{now}}"</p>
        <p>fullnamne:"{{fullName}}"</p>
    </div>
</body>
    <script type="text/javascript">
        
        const vm = new Vue({
            el:'#example',
            data:function(){
                return{
                    message:'hello1',
                    firstName:'trent',
                    lastName:'wu',
                }
            },
            computed:{
                reversedMessage:function(){
                    return this.message.split('').reverse().join('')
                },
                now:function(){
                    return Date.now();
                },
                fullName:{
                    get(){
                        return this.firstName +" "+ this.lastName;
                    },
                    set(newValue){
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length -1]

                    }
                }
            },
            methods:{
                reversedMessage(event){
                    return this.message.split('').reverse().join('')
              }
          }
        })
    </script>
</html>